/* 签到页面CSS */

/* 头部 */
header{
  width: 100%;
  height: 3.5rem;
  background-image: url(../images/signin_bg01.png);
  background-size: 100%;
  position: relative;
}
header>h1{
  display: block;
  font-size: .4rem;
  color: white;
  font-weight: lighter;
  text-align: center;
  padding-top: .4rem;
}
header .rulesign{
  width: 100%;
  height: .4rem;
  display: flex;
  justify-content: space-between;
  margin-top: .38rem;
  padding: 0 .3rem;
  box-sizing: border-box;
}
header .rulesign .rule{
  width: 1.86rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .rulesign .rule p{
  font-size: .32rem;
  color: white;
  letter-spacing: .05rem;
}
header .rulesign .rule a{
  display: block;
  width: .31rem;
  height: .36rem;
}
header .rulesign .rule a img{
  display: block;
  width: 100%;
  height: 100%;
}
header .rulesign .sign{
  width: 2.28rem;
  height: .4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .rulesign .sign p{
  font-size: .32rem;
  color: white;
  letter-spacing: .05rem;
}
header .rulesign .sign .switch {
  position: relative;
  display: inline-block;
  width: .7rem;
  height: .34rem;
}
header .switch input {
  display: none;
}
header .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: .34rem;
  background-color: #fff;
  transition: .4s;
}
header .slider:before {
  position: absolute;
  content: "";
  height: .3rem;
  width: .3rem;
  left: .034rem;
  bottom: .02rem;
  border-radius: 50%;
  background-color: #44a3fd;
  transition: .4s;
}
header input:checked+.slider {
  background-color: #fff;
}
header input:focus+.slider {
  box-shadow: 0 0 1px #fff;
}
header input:checked+.slider:before {
  transform: translateX(.33rem);
}


/* 连续签到 */
.toptit{
  width: 92%;
  height: 2.87rem;
  position: relative;
  top: .3rem;
  left: 4%;
  border-radius: .2rem;
  background-color: white;
  box-shadow: -.1rem 0 .3rem .07rem rgba(0, 0, 0,.2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.toptit h6{
  width: 100%;
  font-size: .24rem;
  color: #bfbfbf;
  margin-left: .6rem;
  margin-bottom: .35rem;
  font-weight: lighter;
  letter-spacing: .03rem;
}
.toptit .signul{
  width: 6.4rem;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.toptit .signul li{
  width: .7rem;
  height: 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.signul li .num{
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background-color: #ffedd7;
  display: flex;
  justify-content: center;
  align-items: center;
}
.signul li .num a{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: #ff8c00;
  font-size: .32rem;
  font-family: myblod;
  text-align: center;
  line-height: .7rem;
}
.signul li .num img{
  display: block;
  width: .35rem;
  height: .34rem;
  margin: auto;
}
.signul li .bar{
  width: .2rem;
  height: .2rem;
  border-radius: 50%;
  background-color: #efefef;
  display: flex;
  z-index: 3;
}
.signul li .bar .inbar{
  width: .06rem;
  height: .06rem;
  border-radius: 50%;
  background-color: #d3d3d3;
  margin: auto;
}
.signul li>p{
  font-size: .26rem;
  color: #afafaf;
}
.signul li:first-child .num a,
.signul li:first-child .bar{
  background-color: #ff8c00;
  color: white;
}
.signul li:first-child .bar .inbar{
  background-color: white;
}
.signul li:first-child>p{
  color: black;
}
.toptit .signul::after{
  content: '';
  width: 5.66rem;
  border-bottom: 1px solid #eaeaea;
  position: absolute;
  top: 59.8%;
  left: 6%;
  z-index: 0;
}


/* 任务 */
.mission{
  width: 100%;
}
.mission>h4{
  margin-top: 1.9rem;
  font-size: .32rem;
  padding: 0 .3rem;
  box-sizing: border-box;
  color: #2f2f2f;
  margin-bottom: .6rem;
}
.mission>h4 span{
  color: #ff8c00;
  font-size: .28rem;
  float: right;
}
.mission .missionul{
  width: 100%;
  padding: 0 .3rem;
  box-sizing: border-box;
  padding-bottom: 2rem;
}
.missionul>li{
  width: 100%;
}
.missionul>li>p{
  font-size: .3rem;
  color: #2f2f2f;
  margin-bottom: .5rem;
}
.missionul>li ul{
  width: 100%;
}
.missionul>li ul li{
  width: 100%;
  height: 1.16rem;
  display: flex;
  margin-bottom: .3rem;
}
.missionul>li ul li img{
  display: block;
  width: .78rem;
  height: .78rem;
  margin-right: .2rem;
}
.missionul>li ul li .text{
  width: 3.9rem;
  height: 100%;
  margin-right: auto;
}
.missionul>li ul li .text h5{
  font-size: .28rem;
  color: #2f2f2f;
}
.missionul>li ul li .text p{
  font-size: .24rem;
  color: #aeaeae;
  line-height: .44rem;
}
.missionul>li ul li .text .money{
  width: .82rem;
  height: .34rem;
  border-radius: .17rem;
  background-color: #ffedd7;
  font-size: .22rem;
  color: #ff8c00;
  font-family: myblod;
  text-align: center;
  line-height: .34rem;
}
.missionul>li ul li>a{
  display: block;
  width: 1.08rem;
  height: .52rem;
  border-radius: .26rem;
  background-color: #eaeaea;
  font-size: .3rem;
  color: #b7b7b7;
  text-align: center;
  line-height: .52rem;
}
.missionul>li ul li>a.active{
  background-color: #338afb;
  color: white;
}